<template>
  <div class="home-container">
    <!-- 顶部用户信息 -->
    <div class="header">
      <div class="user-info">
        <div class="avatar">{{ username.slice(0, 1) }}</div>
        <div class="user-detail">
          <div class="username">{{ username }}</div>
          <div class="class-name">软件工程{{ classId }}班</div>
        </div>
      </div>
      <van-icon name="bell" size="24" class="notification-icon" />
    </div>

    <!-- 即将开始的考试 -->
    <div class="exam-section">
      <h2 class="section-title">即将开始的考试</h2>
      <div class="exam-list">
        <van-cell v-for="exam in examList.exams" :key="exam.id" :title="exam.title" :value="exam.startTime"
          :label="exam.description" class="exam-item" @click="navigateToExamDetail(exam.id)">
          <template #right-icon>
            <van-icon name="arrow-right" /></template>
        </van-cell>
      </div>
    </div>

    <!-- 最近考试记录 -->
    <div class="exam-section">
      <h2 class="section-title">最近考试记录</h2>
      <div class="exam-list">
        <van-cell v-for="exam in recentExams" :key="exam.id" :title="exam.name" :value="`得分: ${exam.score}`"
          :label="exam.status" class="exam-item" @click="navigateToExamResult(exam.id)">
          <template #right-icon>
            <van-icon name="arrow-right" /></template>
        </van-cell>
      </div>
    </div>

    <!-- 底部导航 -->
    <van-tabbar v-model="activeTab" class="bottom-tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/home" />
      <van-tabbar-item icon="search" text="考试" to="/examList" />
      <van-tabbar-item icon="edit" text="日报" to="/dailyReport" />
      <van-tabbar-item icon="chat-o" text="论坛" to="/forum" />
      <van-tabbar-item icon="user" text="我的" to="/profile" />
    </van-tabbar>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { examListRequest } from '@/api/examApi.js'

export default {
  name: 'HomePage',
  data() {
    return {
      username: '',
      classId: '',
      examList: {},
      activeTab: 0,
      // 模拟最近考试记录数据
      recentExams: [
        {
          id: 3,
          name: 'Web前端开发测试',
          score: 85,
          status: '已完成'
        }
      ]
    }
  },
  methods: {
    navigateToExamDetail(id) {
      this.$router.push(`/examDetail/${id}`)
    },
    navigateToExamResult() {
      // 这里应该跳转到考试结果页面，我们稍后实现
      Toast('查看考试结果')
    }
  },
  mounted() {
    const user = JSON.parse(localStorage.getItem('user'));
    if (user) {
      console.log(user)
      this.username = user.name;
      this.classId = user.classId;
    }
    examListRequest().then(res => {
      console.log(res)
      this.examList = res;
    })
  }
}
</script>

<style scoped>
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  background-color: white;
  color: #667eea;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}

.user-detail {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 16px;
  font-weight: bold;
}

.class-name {
  font-size: 12px;
  opacity: 0.8;
}

.notification-icon {
  color: white;
}

.exam-section {
  margin: 15px;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.exam-item {
  border-bottom: 1px solid #f0f0f0;
}

.exam-item:last-child {
  border-bottom: none;
}

.bottom-tabbar {
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
</style>